<template>
    <div class="enter-work-center">
        <div class="company-content">
            <div class="detail">
                <img class="logo" :src="company.companyLogo || require('@/assets/image/default_enterprise_logo.jpg')" alt="logo"/>
                <div class="desc flex-row-space-between">
                    <div>
                        <p class="name mb10">
                            {{ company.companyName }}
                        </p>
                        <p class="tags">
                            {{ company.belongsIndustryDesc }} |
                            {{ company.companyNatureDesc}} |
                            {{ company.companyScaleDesc }}人 |
                            {{ company.areaDesc }}
                        </p>
                        <p class="contact mt15 flex-row-start">
                            <span>
                                <i class="el-icon-mobile-phone"/>
                                {{ company.phone }}
                            </span>
                            <span class="ml30">
                                <i class="el-icon-message"/>
                                {{ company.email }}
                            </span>
                        </p>
                    </div>
                    <div class="actions flex-column-center">
                        <el-button type="primary"
                                   size="small"
                                   icon="el-icon-s-promotion"
                                   @click="routerLink('/enterprise/job/publish')"
                        >
                            发布职位
                        </el-button>
                        <el-button size="small"
                                   icon="el-icon-refresh"
                                   plain
                                   @click="refreshPosition"
                        >
                            刷新职位
                        </el-button>
                        <el-button size="small" icon="el-icon-search" plain @click="routerLink('/looking-for-talent')">
                            搜索简历
                        </el-button>
                    </div>
                </div>
            </div>
            <ul class="static text-center mt20 flex-row-space-around">
                <li>
                    <p class="static-number">
                        {{ company.recruitmentingNum }}
                    </p>
                    <p class="static-text">招聘中的职位</p>
                </li>
                <li>
                    <p class="static-number">
                        {{ company.receiveResume }}
                    </p>
                    <p class="static-text">收到的简历</p>
                </li>
                <li>
                    <p class="static-number">
                        {{ company.receiveResumePending }}
                    </p>
                    <p class="static-text">待处理的简历</p>
                </li>
                <li>
                    <p class="static-number">
                        {{ company.resumeDispose | resumeDisposeFormat }} %
                    </p>
                    <p class="static-text">简历处理率</p>
                </li>
                <li>
                    <p class="static-number">{{company.invitedInterview}}</p>
                    <p class="static-text">面试邀请</p>
                </li>
                <li>
                    <p class="static-number">
                        {{ company.invitedInterview }}
                    </p>
                    <p class="static-text">谁看过我</p>
                </li>
            </ul>
        </div>
        <div class="static-content">
            <div class="static-header">
                <el-tabs v-model="staticActiveName" @tab-click="staticClick">
                    <el-tab-pane label="访客统计" name="getVisitorNum"></el-tab-pane>
                    <el-tab-pane label="职位浏览统计" name="getBrowseNum"></el-tab-pane>
                    <el-tab-pane label="应聘统计" name="getCompanyApplyingStatistical"></el-tab-pane>
                </el-tabs>
                <div class="static-actions">
                    <a :class="{'active': staticActiveDate === 7}" @click="staticDateChange(7)">7天</a>
                    <a :class="{'active': staticActiveDate === 15}" @click="staticDateChange(15)">15天</a>
                    <a :class="{'active': staticActiveDate === 30}" @click="staticDateChange(30)">30天</a>
                </div>
            </div>
            <div class="static-chart">
                <ve-line
                    :data="staticChart.chartData"
                    :settings="staticChart.chartSettings"
                    :extend="staticChart.chartExtend"
                    :series="staticChart.series"
                    height="200px"></ve-line>
            </div>
        </div>
        <div class="resume-content">
            <div class="resume-content-header flex-row-space-between">
                <span class="fs14 text-black">推荐简历</span>
                <a @click="changeResume" class="default-a" href="javascript:;">
                    换一批
                </a>
            </div>
            <div class="resume-list">
                <div class="list-item" v-for="(item, index) in resumeList" :key="index">
                    <img :src="item.headImg" class="item-avatar" alt="avatar"/>
                    <div class="item-content">
                        <p class="text-black">
                            {{ item.name }}
                        </p>
                        <p>
                            <span>
                                {{ item.sex | sexFormat }} |
                                {{ item.year | yearFormat }} 岁 |
                                {{ item.highestEducationDesc }} |
                                {{ item.workExperienceDesc }}
                            </span>
                        </p>
                        <p>
                            {{ item.expectIndustry }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {
    refreshJob,
    getBasicInfo,
    getBrowseNum,
    getRecommendedResume,
    getVisitorNum, getCompanyApplyingStatistical
} from '@/api/enterprise/work/center'
import {getAuthenticationStatus} from "@/api/enterprise/work/account";
import MessageBox from "element-ui/packages/message-box/src/main";

export default {
    name: 'enterpriseWorkCenter',
    components: {},
    data() {
        return {
            page: 1,
            company: {},
            staticActiveName: 'getVisitorNum',
            staticActiveDate: 7,
            staticChart: {
                loading: true,
                chartData: {
                    columns: ['日期', '总浏览次数', '登陆用户浏览次数'],
                    rows: []
                },
                series: [
                    {
                        type: 'line',
                        name: '总浏览次数',
                        smooth: false,
                        color: '#1890ff',
                        data: []
                    },
                    {
                        type: 'line',
                        name: '登陆用户浏览次数',
                        color: '#52C41A',
                        smooth: false,
                        lineStyle: {
                            type: 'dashed'
                        },
                        data: []
                    }
                ],
                chartSettings: {},
                chartExtend: {
                    grid: {
                        left: '5',
                        right: '20',
                        top: '10',
                        bottom: '0'
                    },
                    xAxis: {
                        show: true,
                        // boundaryGap: false,
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        show: true,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: ['#e4e4e4']
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#333'
                        },
                        borderWidth: 1,
                        borderColor: '#e8e8e8'
                    },
                    axisPointer: {
                        lineStyle: {
                            width: 0
                        }
                    }
                }
            },
            resumeList: []
        }
    },
    watch: {
        staticActiveName(val) {
            if (val) {
                this.toGetBrowseNum()
            }
        },
        staticActiveDate(val) {
            if (val) {
                this.toGetBrowseNum()
            }
        },
    },
    filters: {
        resumeDisposeFormat(val) {
            return val ? Number(val).toFixed(2): 0
        },
        sexFormat(val) {
            let sexObj = { 1: '男', 2: '女' }
            return sexObj[val]
        },
        yearFormat(val) {
            return new Date().getFullYear() - Number(val)
        }
    },
    created() {
        // 获取企业基本信息
        getBasicInfo().then(res => {
            /*let res = {
                datas: {
                    "accountId": 20,
                    "companyName": "腾讯有效公司",
                    "companyPerson": "2",
                    "companyNature": "企业性质",
                    "companyNatureDesc": "2",
                    "companyLogo": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602585926779&di=5900d37d20577b592df2a8be5d05bd99&imgtype=0&src=http%3A%2F%2Fpic.baiqi008.com%2Fuploads%2Fdpdloklov.jpeg",
                    "belongsIndustry": '所属行业',
                    "belongsIndustryDesc": "2",
                    "companyScale": '企业规模',
                    "companyScaleDesc": "2",
                    "area": "深圳",
                    "registerCapital": 2.00,
                    "corporateWelfare": "2",
                    "companyIntroduction": "2",
                    "phone": "18681140825",
                    "email": '1000@qq.com',
                    "recruitmentingNum": "3",
                    "receiveResume": "15",
                    "receiveResumePending": "9",
                    "invitedInterview": "3",
                    "hasSeenMe": "0",
                    "resumeDispose": "60.0"
                }
            }*/
            this.company = res.datas
        })

        this.toGetRecommendedResume()
    },
    mounted() {
        this.getStaticChartData()
        this.toGetBrowseNum()
        this.authenticationStatus()
    },
    methods: {
        authenticationStatus() {
            let app = this;
            getAuthenticationStatus().then(res => {
                if (!res.datas || res.datas.auditStatus != 1) {
                    MessageBox.confirm(
                        '您尚未认证，请前往认证',
                        '系统提示',
                        {
                            confirmButtonText: '点击前往',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        app.$router.push('/enterprise/account/approve');
                    })
                }
            });
        },
        // 换一批
        changeResume() {
            this.page++
            this.toGetRecommendedResume()
        },
        // 获取推荐简历
        toGetRecommendedResume() {
            let params = {
                'limit': 0,
                'page': this.page
            }
            getRecommendedResume(params).then(res => {
                /* let res = {
                     "datas": [
                         {
                             "expectIndustry": "期望行业",
                             "expectPosition": "期望职位",
                             "headImg": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602593669772&di=9257d902737fe287376a69d3599347c1&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F24%2F20200824160723_XewFH.thumb.400_0.jpeg",
                             "highestEducationDesc": "大专",
                             "id": 0,
                             "name": "李思雨",
                             "sex": 1,
                             "workExperienceDesc": "1-3年",
                             "year": "1992"
                         },
                         {
                             "expectIndustry": "期望行业",
                             "expectPosition": "期望职位",
                             "headImg": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602593669772&di=9257d902737fe287376a69d3599347c1&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F24%2F20200824160723_XewFH.thumb.400_0.jpeg",
                             "highestEducationDesc": "大专",
                             "id": 0,
                             "name": "李思雨",
                             "sex": 2,
                             "workExperienceDesc": "1-3年",
                             "year": "1992"
                         }
                     ]
                 }*/
                this.resumeList = res.datas
            })
        },
        buildChartData(xdataList, ytotalVisits, ylogTotalVisits) {
            let rows = []
            xdataList.forEach((v) => {
                rows.push({ '日期': v })
            })
            this.staticChart.chartData.rows = rows
            this.staticChart.series[0].data = ytotalVisits
            this.staticChart.series[1].data = ylogTotalVisits

        },
        // 获取浏览统计系信息
        toGetBrowseNum() {
            let params = {
                // 'companyId': 20,
                'dayNum': this.staticActiveDate,
                'stringDay': ''
            }
            const type = this.staticActiveName
            switch (type) {
                case 'getVisitorNum':
                    getVisitorNum(params).then(res => {
                        this.buildChartData(res.datas.xdataList, res.datas.ytotalVisits, res.datas.ylogTotalVisits)
                    })
                    break
                case 'getBrowseNum':
                    getBrowseNum(params).then(res => {
                        this.buildChartData(res.datas.xdataList, res.datas.ytotalVisits, res.datas.ylogTotalVisits)
                    })
                    break
                case 'getCompanyApplyingStatistical':
                    getCompanyApplyingStatistical(params).then(res => {
                        this.buildChartData(res.datas.xdataList, res.datas.yapplyingStatisticalList, res.datas.yapplyingStatisticalList)
                    })
                    break
            }
        },
        // 刷新职位
        refreshPosition() {
            this.getStaticChartData()
            this.toGetBrowseNum()
            this.$message.success('刷新职位成功')
            // refreshJob({ id: this.company.id }).then(res => {
            //     this.$message.success('刷新职位成功')
            // })
        },
        getStaticChartData() {
            const rowsDate = [
                '09-10',
                '09-11',
                '09-12',
                '09-13',
                '09-14',
                '09-15',
                '09-16',
                '09-17',
                '09-18',
                '09-19'
            ]
            const data1 = [
                100,
                213,
                50,
                60,
                80,
                10,
                80,
                156,
                99,
                186
            ]
            const data2 = [
                50,
                60,
                10,
                25,
                15,
                88,
                99,
                12,
                156,
                33
            ]
            let rows = []
            rowsDate.forEach((v) => {
                rows.push({ '日期': v })
            })
            this.staticChart.chartData.rows = rows
            this.staticChart.series[0].data = data1
            this.staticChart.series[1].data = data2
        },
        staticClick() {

        },
        staticDateChange(index) {
            this.staticActiveDate = index
        }
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-center {
    .company-content {
        background: #FFF;
        padding: 40px 20px 40px 20px;

        .detail {
            display: flex;

            .logo {
                width: 100px;
                height: 100px;
            }

            .desc {
                flex: 1 1;
                margin-left: 10px;

                .name {
                    color: #111;
                    font-size: 18px;
                }

                .actions {
                    .el-button {
                        margin-bottom: 10px;
                    }

                    .el-button + .el-button {
                        margin-left: 0;
                    }
                }
            }
        }

        .static {
            .static-number {
                font-size: 26px;
                color: $text-red;
                margin-bottom: 5px;
            }
        }
    }

    .static-content {
        background: #FFF;
        margin-top: 15px;
        padding: 10px 20px;

        .static-header {
            position: relative;
        }

        .static-actions {
            position: absolute;
            right: 0;
            top: 7px;

            a {
                margin-left: 15px;

                &:hover, &.active {
                    color: $text-blue;

                }
            }
        }

        .static-chart {
            padding: 40px 60px 60px 60px;
        }
    }

    .resume-content {
        background: #FFF;
        margin-top: 15px;
        padding: 10px 20px 40px 20px;

        .resume-content-header {
            padding-top: 15px;
            padding-bottom: 25px;
        }

        .resume-list {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .list-item:nth-child(3n) {
                margin-right: 0;
            }

            .list-item {
                width: 300px;
                background: #FFF;
                border: 1px solid #E8E8E8;
                border-radius: 2px;
                display: flex;
                padding: 15px;
                margin-bottom: 15px;
                margin-right: 15px;

                .item-avatar {
                    width: 64px;
                    height: 64px;
                }

                .item-content {
                    margin-left: 15px;
                    line-height: 22px;

                    p {
                        width: 200px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
}
</style>
